<template>
  <div class="home">
    <van-empty class="custom-image"
      image="https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/26/d9324827cf10403fa41a24f667f65ccb.png"
      description="支付失败">
      <van-button round block type="danger" class="bottom-button" @click="goOrder">回到订单</van-button>
    </van-empty>
  </div>
</template>

<script>
import api from '@/api/api';
export default {
  components: {},
  props: {},
  data() {
    return {
      sn: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    goOrder() {
      this.$router.replace({
        path: "/order",
      });
    },
    async canclePay() {
      await api.canclePay({
        sn: this.sn
      })
      this.$toast({
        message: '已取消支付',
        duration: 1500
      })
    }
  },
  created() {
    // Toast({
    //   message: '111',
    //   duration: 0
    // })
  },
  mounted() {
    this.sn = this.$route.query.out_trade_no
    this.canclePay()
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  min-height: 100vh;

  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  /deep/ .custom-image .van-empty__image {
    max-width: 200px;
    min-width: 200px;
    height: 200px;
  }

  /deep/ .van-empty__bottom {
    padding: 0 340px;
    width: 100%;
  }
}
</style>